<template>
<div>

  <div class="chain-link-bar-wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item to="/member">会员列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/member/detail/' + member.account_id">详情：{{member.last_name}}{{member.first_name}}</el-breadcrumb-item>
    </el-breadcrumb>  
  </div>

  <el-card class="box-card">
    
    <div slot="header" class="clearfix">
      <h3 class="app-h3 app-margin-v-0">
        会员详情
      </h3>
    </div>

    <div class="app-diliver-10"></div>
    
    <el-row :gutter="80">
      <el-col :span="12">
        
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">会员信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          
          <el-col :span="3">
            <span class="app-label">姓名：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{member.last_name}}{{member.first_name}}&nbsp;</span>
          </el-col>
          
          <el-col :span="3">
            <span class="app-label">性别：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text" v-if="member.gender == 'FEMALE'">女&nbsp;</span>
            <span class="app-text" v-else-if="member.gender == 'MALE'">男&nbsp;</span>
            <span class="app-text" v-else>未知&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">头像：</span>
          </el-col>
          <el-col :span="20">
            <img v-if="member.avatar != null && member.avatar != ''" class="section-img-80" :src="member.avatar" />
            <span class="app-text" v-else>&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">电话：</span>
          </el-col>
          <el-col :span="20">
			  <span v-if="role > 1">{{ member.phone }}</span>
			  <span v-else>{{ member.phone.substring(0,3) }}********</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">VIP等级：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text" v-if="memberVip.level == 1">一星会员&nbsp;</span>
            <span class="app-text" v-else-if="memberVip.level == 2">二星会员&nbsp;</span>
            <span class="app-text" v-else>普通会员&nbsp;</span>

          </el-col>

          <el-col :span="3">
            <span class="app-label">VIP时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{memberVip.start_date_time_str}} ~ {{memberVip.end_date_time_str}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">注册时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.register_date_time}}&nbsp;</span>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12">
        
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">审核状态</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>
        
        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">状态：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">            
              <el-button v-if="account.check_status == 'NOT'"  size="mini">未审核</el-button>
              <el-button v-if="account.check_status == 'PASS'" type="success"  size="mini">已通过</el-button>
              <el-button v-if="account.check_status == 'FAIL'" type="danger"  size="mini">未通过</el-button>&nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核说明：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.check_exception_explain}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.check_date_time_str}}&nbsp;</span>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-b-0">公司信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">公司名称：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.name}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">公司地址：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              {{company.province}}&nbsp;{{company.city}}&nbsp;{{company.area}}&nbsp;
              {{company.address}}&nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">公司主页：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.home_page}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">公司电话：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.company_tel}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">公司logo：</span>
          </el-col>
          <el-col :span="20">
            <img v-if="company.logo != null" class="section-img-80" :src="company.logo"/>
            <span class="app-text">&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">公司介绍：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.intro}}&nbsp;</span>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    
    

  </el-card>

</div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'

  import Api from '../../api/Api'
  import MemberApi from '../../api/MemberApi'
	//需要导入vuex的数据管理
	import Store from '../../store/index.js'


  export default {
  	components: {
  		NcButton, SubmitButton
  	},
  	data(){
  	  return {
        
        accountId: 0,
        
        member: {},
        memberVip: {},
        company: {},
        account: {},
		role: ''
  	  }
  	},
  	computed: {
  	  
  	},
  	created(){
  	  this.accountId = this.$route.params.accountId;
      this.getMember();
	  this.role = Store.state.user.role;
  	},
    watch: {
      '$route' (to, from) {
        this.accountId = to.params.accountId;
        this.getMember();
      }
    },
  	methods: {
      getMember(){
        MemberApi.detail(this.accountId, json => {
          this.member = json.member;
          this.memberVip = json.memberVip;
          this.company = json.company;
          this.account = json.account;
        });
      }
  	}
  }
</script>

